<template>
    <!-- 添加 | 修改 | 查看弹窗 -->
    <el-dialog :title="`${drawerProps.title}`" v-model="drawerVisible" width="700px" append-to-body center destroy-on-close
        draggable :close-on-click-modal='false'>
        <el-form ref="ruleFormRef" :model="drawerProps.rowData" :rules="rules" label-width="auto"
            :disabled="drawerProps.title == '查看'">
            <el-form-item label="证件名称" prop="certName">
                <el-input v-model="drawerProps.rowData!.certName" placeholder="请输入证件名称" />
            </el-form-item>
            <el-form-item label="到期时间" prop="expireDate">
                <el-date-picker clearable size="large" v-model="drawerProps.rowData!.expireDate" type="date"
                    value-format="YYYY-MM-DD" placeholder="选择到期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="证书图片" prop="pic">
                <ImageUpload v-model="drawerProps.rowData!.pic" :limit="1"  :isShowTip="false" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确 定</el-button>
                <el-button @click="drawerVisible = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template >
<script setup lang="ts" >
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
const proxy = getCurrentInstance()?.proxy;


//父组件传递参数类型
interface DiolgProps {
    title: string;
    isView: boolean;
    rowData: any;
    api?: (params: any,index:number | null) => Promise<any>;
    getTableList?: () => void;
    [proName: string]: any,
    index?:number | null
}
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const drawerVisible = ref(false);
const drawerProps = ref<DiolgProps>({
    isView: false,
    title: "",
    rowData: {},
    index:null
});

// 接收父组件传过来的参数
const acceptParams = (params: DiolgProps) => {
    drawerProps.value = params;
    console.log("drawerProps.value", drawerProps.value)
    drawerVisible.value = true;
};

const handleSubmit = () => {
    ruleFormRef.value!.validate(async valid => {
        if (!valid) return;
        try {
            
            await drawerProps.value.api!(drawerProps.value.rowData, drawerProps.value.index);
            ElMessage.success({ message: `${drawerProps.value.title}成功！` });
            // drawerProps.value.getTableList!();
            drawerVisible.value = false;
        } catch (error) {
            console.log(error);
        }
    });
};

const rules = reactive(
    {
        certName: [{ required: true, message: "请输入证件名称", trigger: "blur" }],
        expireDate: [{ required: true, message: "请选择到期时间", trigger: "blur" }],
        pic: [{ required: true, message: "请输入图片", trigger: "blur" }],
    }
);
defineExpose({
    acceptParams
});
</script>
